<template>
  <div>
    <div class="search-h">
      <div>
        <a-form layout="inline" :form="queryParams">
          <a-form-item label="名称">
            <a-input
              v-model="queryParams.naem"
              placeholder="输入名称"
            ></a-input>
          </a-form-item>
        </a-form>
      </div>
      <div>
        <a-button type="danger" @click="query"> 查询 </a-button>
        <a-button @click="reset"> 重置 </a-button>
      </div>
    </div>
    <div class="btn-group">
      <a-button @click="add"> 新增 </a-button>
      <a-button @click="del"> 删除 </a-button>
      <a-button> 重置 </a-button>
    </div>
    <a-table
      bordered
      rowKey="customerId"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :columns="columns"
      :data-source="data"
      :pagination="pageParams"
      @change="tableChange"
    >
      <template slot="operation" slot-scope="rows, record">
        <a-icon
          type="setting"
          theme="filled"
          @click="edit(record)"
          style="color: #1890ff"
        />
        <a-icon type="delete" theme="filled" @click="del(record)" />
      </template>
    </a-table>

    <!-- 新增-编辑 -->
    <a-modal
      v-model="visible"
      :title="title"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        layout="horizontal"
        :model="form"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
      >
        <a-form-model-item label="事项">
          <a-select v-model="form.underDepar">
            <a-select-option
              :key="item.id"
              :value="item.value"
              v-for="item in underDeparList"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="承办部门">
          <a-select v-model="form.underDepar">
            <a-select-option
              :key="item.id"
              :value="item.value"
              v-for="item in underDeparList"
            >
              {{ item.label }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="事项">
          <a-input v-model="form.matter" placeholder="请输入事项" />
        </a-form-model-item>
        <a-form-model-item label="办理时限">
          <a-input v-model="form.procTimeLimit" placeholder="请输入办理时限" />
        </a-form-model-item>
        <a-form-model-item label="联系电话">
          <a-input v-model="form.phone" placeholder="请输入联系电话" />
        </a-form-model-item>
        <a-form-model-item label="所需资料">
          <a-button type="danger" @click="addData"> 新增 </a-button>
            <div v-for="(item,index) in dataList" :key="item.id">
              <a-form-model layout="inline" :model="item">
                  <a-form-model-item style="width: 150px;">
                    <a-input
                      v-model="item.index"
                      placeholder="请输入序号"
                    />
                  </a-form-model-item>
                  <a-form-model-item style="width: 150px;">
                    <a-input
                      v-model="item.content"
                      placeholder="请输入内容"
                    />
                  </a-form-model-item>
                  <a-form-model-item style="width: 30px;">
                    <a-icon type="delete" theme="filled" @click="delData(ietm, index)"/>
                  </a-form-model-item>
              </a-form-model>
            </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: '承办层',
    dataIndex: 'undertaker'
  },
  {
    title: '承办部门',
    dataIndex: 'underDepar'
  },
  {
    title: '事项',
    dataIndex: 'matter'
  },
  {
    title: '办理时限',
    dataIndex: 'procTimeLimit'
  },
  {
    title: '联系电话',
    dataIndex: 'phone'
  },
  {
    title: '创建时间',
    dataIndex: 'createdTime'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime'
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' },
    dataIndex: 'operation'
  }
]

export default {
  data () {
    return {
      dataList: [],
      underDeparList: [
        {
          value: 'test',
          label: '回显名称',
          id: 0
        },
        {
          value: 'test1',
          label: '回显名称1',
          id: 1
        }
      ],
      visible: false,
      title: '新增',
      queryParams: {
        name: ''
      },
      pageParams: {
        current: 1,
        pageSize: 10,
        total: 0,
        'show-size-changer': true
      },
      addForm: {},
      form: {
        underDepar: '',
        matter: '',
        procTimeLimit: '',
        phone: '',
        name: ''
      },
      data: [],
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    updateData () {},
    delData (item, index) {
      this.dataList.splice(index, 1)
    },
    addData () {
      let item = {
        index: '',
        content: '',
        id: this.dataList.length + 1
      }
      this.dataList.push(item)
    },
    tableChange (page) {
      this.pageParams.pageSize = page.pageSize
      this.pageParams.current = page.current
      this.getList()
    },
    query () {
      this.getList()
    },
    reset () {
      this.queryParams = this.$options.data().queryParams
      this.getList()
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    add () {
      this.visible = true
      this.title = '新增'
    },
    edit (record) {
      this.form = record
      this.dataList = record.list || []
      this.visible = true
      this.title = '编辑'
    },
    del (record) {
      let list = record.id ? [record.id] : this.selectedRowKeys

      this.$confirm({
        title: '提示',
        content: '确定删除操作数据?',
        onOk () {
          // TODO:
          console.log('🚀 ~ file: index.vue ~ line 136 ~ del ~ list', list)
        }
      })
    },
    handleOk () {
      // TODO:
      let params = {
        ...this.form,
        list: this.dataList || [],
        id: this.data.length + 1
      }
      this.data.push(params)
      this.visible = false
      this.handleCancel()
    },
    handleCancel () {
      this.form = this.$options.data().form
      this.dataList = []
    },
    // 接口
    getList () {
      // TODO:
      let params = {
        current: this.pageParams.current,
        pageSize: this.pageParams.pageSize,
        ...this.queryParams
      }

      // const data = []
      // for (let i = 0; i < 46; i++) {
      //   data.push({
      //     key: i,
      //     undertaker: `Edward King ${i}`,
      //     underDepar: 'test',
      //     matter: '事项',
      //     procTimeLimit: '办理时限',
      //     phone: '13700000000',
      //     createdTime: 'createdTime',
      //     updateTime: 'updateTime',
      //     operation: 'operation'
      //   })
      // }
      // this.data = data
      // this.pageParams.total = data.length
    }
  }
}
</script>
<style lang="less" scoped>
.search-h {
  display: flex;
  justify-content: space-between;
  margin: 10px 0 8px;
  /deep/ .ant-form-item {
    margin-bottom: 0px !important;
  }
}
.btn-group {
  margin-bottom: 12px;
}
</style>
